<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./script/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="./script/Cesium/Widgets/widgets.css" />
    <style>
      html,
      body {
        height: 100%;
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div id="cesiumContainer" style="width: 100%"></div>
    <script>
      const viewer = new Cesium.Viewer("cesiumContainer", {
        // baseLayerPicker: false,
        // navigationHelpButton: false,
        // sceneModePicker: false,
        terrainProvider: Cesium.createWorldTerrain(),
        baseLayerPicker: false,
        shouldAnimate: true,
      });

      function getCzml() {
        const czml = [
          {
            id: "document",
            name: "CZML Path",
            version: "1.0",
            clock: {
              interval: "2012-08-04T10:00:00Z/2012-08-04T10:02:00Z",
              currentTime: "2012-08-04T10:00:00Z",
              multiplier: 10,
            },
          },
          // {
          //   id: "launchvehicle",
          //   name: "launchvehicle box",
          //   position: {
          //     cartographicDegrees: [-114.0, 40.0, 300000.0],
          //   },
          //   model: {
          //     gltf: "./assets/launchvehicle.glb",
          //     scale: 2.0,
          //     minimumPixelSize: 128,
          //     runAnimations: false,
          //     color: {
          //       rgba: [102, 255, 255, 128],
          //     },
          //   },
          // },
          // {
          //   id: "airOne",
          //   name: "airOne box with black outline",
          //   position: {
          //     cartographicDegrees: [-107.0, 40.0, 300000.0],
          //   },
          //   model: {
          //     //gltf: "https://assets.agi.com/models/launchvehicle.glb",
          //     gltf: "./assets/SampleData/models/CesiumAir/Cesium_Air.glb",
          //     scale: 2.0,
          //     minimumPixelSize: 128,
          //     runAnimations: false,
          //     color: {
          //       rgba: [255, 0, 0, 128],
          //     },
          //   },
          // },
          // {
          //   id: "airTwo",
          //   name: "airTwo box with black outline",
          //   position: {
          //     cartographicDegrees: [-100.0, 40.0, 300000.0],
          //   },
          //   model: {
          //     //gltf: "https://assets.agi.com/models/launchvehicle.glb",
          //     gltf: "./assets/SampleData/models/CesiumAir/Cesium_Air.glb",
          //     scale: 2.0,
          //     minimumPixelSize: 128,
          //     runAnimations: false,
          //     color: {
          //       rgba: [255, 255, 0, 128],
          //     },
          //   },
          // },
          // {
          //   id: "point 1",
          //   name: "point",
          //   position: {
          //     cartographicDegrees: [-105.0, 40.0, 300000],
          //   },
          //   point: {
          //     color: {
          //       rgba: [255, 255, 255, 255],
          //     },
          //     outlineColor: {
          //       rgba: [255, 0, 0, 255],
          //     },
          //     outlineWidth: 4,
          //     pixelSize: 20,
          //   },
          // },
          {
            id: "path",
            name: "path with GPS flight data",
            description:
              "<p>Hang gliding flight log data from Daniel H. Friedman.<br>Icon created by Larisa Skosyrska from the Noun Project</p>",
            availability: "2012-08-04T10:00:00Z/2012-08-04T10:02:00Z",
            path: {
              material: {
                polylineOutline: {
                  color: {
                    rgba: [255, 0, 255, 255],
                  },
                  outlineColor: {
                    rgba: [0, 255, 255, 255],
                  },
                  outlineWidth: 5,
                },
              },
              width: 8,
              leadTime: 10,
              trailTime: 1000,
              resolution: 5,
            },
            billboard: {
              image:
                "",
              scale: 1.5,
              eyeOffset: {
                cartesian: [0.0, 0.0, -10.0],
              },
            },
            position: {
              epoch: "2012-08-04T10:00:00Z",
              cartographicDegrees: [
                0,
                -1401.049071,
                -1113.114676,
                6132.262949,
                10,
                -1401.796667,
                -1113.653665,
                6131.994245,
                20,
                -1402.544165,
                -1114.192582,
                6131.725426,
                30,
                -1403.291567,
                -1114.731427,
                6131.456492,
                40,
                -1404.038871,
                -1115.2702,
                6131.187444,
                50,
                -1404.786078,
                -1115.808899,
                6130.918281,
                60,
                -1405.533188,
                -1116.347527,
                6130.649003,
                70,
                -1406.2802,
                -1116.886082,
                6130.37961,
                80,
                -1407.027115,
                -1117.424564,
                6130.110103,
                90,
                -1407.773933,
                -1117.962974,
                6129.840481,
                100,
                -1408.520653,
                -1118.501311,
                6129.570745,
                110,
                -1409.267275,
                -1119.039576,
                6129.300894,
                120,
                -1410.0138,
                -1119.577768,
                6129.030929,
                130,
                -1410.760228,
                -1120.115887,
                6128.76085,
                140,
                -1411.506558,
                -1120.653934,
                6128.490656,
                150,
                -1412.25279,
                -1121.191908,
                6128.220348,
                160,
                -1412.998925,
                -1121.729809,
                6127.949926,
                170,
                -1413.744962,
                -1122.267637,
                6127.679389,
                180,
                -1414.490901,
                -1122.805393,
                6127.408739,
                190,
                -1415.236743,
                -1123.343076,
                6127.137974,
                200,
                -1415.982487,
                -1123.880686,
                6126.867096,
              ],
            },
          },
        ];
        return czml;
      }

      function startUp2() {
        console.log("x");
        const czml = getCzml();

        const dataSourcePromise = Cesium.CzmlDataSource.load(czml);
        dataSourcePromise.then((dataSource) => {
          const entity = dataSource.entities.getById("launchvehicle");

          console.log(entity);

          viewer.trackedEntity = ds.entities.getById("path");

          //setRotate(entity, { rotateX: 100, rotateY: 100, rotateZ: 100 });
          //update3dtilesMaxtrix(entity);
          setModelMatrix(entity);
        });
        viewer.dataSources.add(dataSourcePromise);
        viewer.zoomTo(dataSourcePromise);

        viewer.camera.setView({
          destination: new Cesium.Cartesian3(
            3260477.715766683,
            2934860.571433653,
            -7421849.271432068
          ),
        });
      }

      startUp2();

      function startUp() {
        const czml = getCzml();
        viewer.dataSources
          .add(Cesium.CzmlDataSource.load(czml))
          .then(function (ds) {
            //viewer.trackedEntity = ds.entities.getById("path");
          });
      }

      startUp();
    </script>
  </body>
</html>
